<template>
  <div>

    <el-table class="tb-edit" stripe :data="data" style="width: 100%" border>
      <el-table-column type="index" label="#" align="center" width="50">
        <template #default="scope">
          <div :class="{ showIco: isUpdata }">
            <span class="scope_index">{{ scope.$index + 1 }}</span>
            <i class="el-icon-brush ico" @click="cellClear(scope)"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="feeTypeName" label="服务类型" width="120">
      </el-table-column>
      <el-table-column prop="row.content" label="服务内容">
        <template #header="{ column }">
          <span>服务内容</span>
          <el-popconfirm title="确认批量覆盖第一条服务内容？" @confirm="contentConfirm">
            <i class="el-icon-files" slot="reference" v-show="isUpdata"
              style="font-size: 14px; font-weight: bold;margin-left: 10px;cursor: pointer;"></i>
          </el-popconfirm>
          <!-- <i class="el-icon-files" style="font-size: 14px; font-weight: bold;margin-left: 10px;cursor: pointer;"></i> -->
        </template>
        <template #default="{ row }">
          <div v-if="isUpdata">
            <el-form :model="row">
              <el-form-item prop="content" style="margin-bottom: 0 ;" :rules="[
                { required: true, message: '请输入服务内容', trigger: 'blur' }]">
                <el-input show-word-limit :maxlength="100" v-model="row.content" placeholder="请填写"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span v-else>{{ row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="factoryAmount" label="工厂价格" width="180">
        <template #default="{ row }">
          <div v-if="isUpdata">
            <el-input-number style="width: 100%;" v-model="row.factoryAmount" controls-position="right"
              :min="0"></el-input-number>
          </div>
          <span v-else>{{ row.factoryAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="masterAmount" label="师傅价格" width="180">
        <template #default="{ row }">
          <div v-if="isUpdata">
            <el-input-number style="width: 100%;" v-model="row.masterAmount" controls-position="right"
              :min="0"></el-input-number>
          </div>
          <span v-else>{{ row.masterAmount }}</span>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>

export default {
  emits: ['conBatChange'],
  props: {
    data: {
      type: Array,
      require: true,
      default: []
    },
    isUpdata: {
      type: Boolean,
      require: true,
    }
  },
  comments: {},
  data() {
    return {}
  },
  methods: {
    cellClear(scope) {
      scope.row.content = ''
      scope.row.factoryAmount = 0
      scope.row.masterAmount = 0
    },
    contentConfirm() {
      this.$emit('conBatChange')
    }
  },

}
</script>

<!-- <style lang="scss">
.tb-edit {
  .el-table__body-wrapper {
    .el-table__row {
      .el-table__cell {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }
  }
}
</style> -->
<style lang="scss" scoped>
.ico {
  display: none;
  font-size: 16px;
  cursor: pointer;
  transition: all .3s linear;
}

.tb-edit {
  :deep(.el-form-item__error) {}

  :deep(.el-table__row) {
    &:hover {
      .showIco {
        .ico {
          display: inline-block;
        }

        .scope_index {
          display: none;
        }
      }


    }
  }
}
</style>